<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.14'></script>
</head>

<body>
    <!-- 
        收集表单数据:
            若: <input type="text"/>,则v-model收集的是value的值，用户输入的就是value的值
            若: <input type="radio"/>,则v-model收集的是value的值, 且要给标签配置value值
            若: <input type="checkbox"/>
                1. 没有配置input的value属性, 那么收集的就是checked(勾选or未勾选, 是布尔值)
                2. 配置input的value属性:
                    (1).v-model的初始值是非数组, 那么收集的就是checked(勾选or未勾选, 是布尔值)
                    (2).v-model的初始值是数组, 那么收集的就是value组成的数组
            备注: v-model的三个修饰符
                lazy: 失去焦点再收集数据
                number: 输入字符串转为有效数字
                trim: 输入首尾空格过滤

     -->
    <div id='app'>
        <form action="">
            <label for="username">姓名: </label>
            <input type="text" id="username" v-model="userinfo.name">
            <br><br>
            <label for="password">密码: </label>
            <input type="password" id="password" v-model="userinfo.password">
            <br><br>
            <label for="age">年龄: </label>
            <input type="number" id="age" v-model.number="userinfo.age">
            <br><br>
            性别: 
            <input type="radio" value="male" v-model="userinfo.sex" name="sex">男 
            <input type="radio" value="female" v-model="userinfo.sex" name="sex">女
            <br><br>
            爱好: 
            <input type="checkbox" v-model="userinfo.hobby" value="study">学习 
            <input type="checkbox" v-model="userinfo.hobby" value="play">打游戏 
            <input type="checkbox" v-model="userinfo.hobby" value="eat">吃饭
            <br><br>
            所属校区: 
            <select v-model="userinfo.school">
                <option value="苏州">苏州</option>
                <option value="杭州">杭州</option>
                <option value="台州">台州</option>
            </select>
            <br><br>
            其他信息: <textarea v-model="userinfo.other"></textarea>
            <br><br>
            <input type="checkbox" v-model="userinfo.isAgree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a><button @click="demo">提交</button>
        </form>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    userinfo:{
                        name:'',
                        password:'',
                        age:'',
                        sex:'',
                        hobby:[],
                        school:'',
                        other:'',
                        isAgree:''
                    }
                } 
            },
            methods:{
                demo(e){
                    e.preventDefault()
                    console.log(this)
                }
            }
        })
    </script>
</body>

</html>